<template>
    <div class="personal">
        <el-row>
            <el-col :span="24">


				<el-card shadow="hover" class="mb10  ">
					<div class="system-user-search">
						<div>
							<el-form :model="param" label-width="150px">
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="选择时间：">
                    <el-date-picker
                        v-model="param.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        value-format="YYYY-MM-DD"
                        end-placeholder="结束时间"
                    />
									</el-form-item>
								</el-col>
							</el-form>
						</div>
						<div style="display: flex;justify-content: end;">
							<el-button class="ml10" @click="searchClear">重置 </el-button>
							<el-button class="ml10 btn_bgc" type="primary" @click="search"> 查询</el-button>

						</div>
					</div>
				</el-card>
			</el-col>
			<!-- 更新信息 -->
			<el-col :span="24">
				<el-card shadow="hover" class="mt15 personal-edit">
					<template #header>
						<div class="header_search">
							<div>
								<el-button class="button" @click="allRead">全部已读</el-button>
							</div>
						</div>
					</template>
					<div class="personal-edit-safe-box" v-for="(item,index) in list" :key="index">
						<div class="personal-edit-safe-item">
							<div class="personal-edit-safe-item-left">
								<div class="personal-edit-safe-item-left-value">
									<div class="colorRed" v-if="item.status===1"></div>
									<div class="imgIcon"><img src="../../assets/img/logo_top.png" alt="" class="img_img"></div>
								</div>
							</div>
							<div class="personal-edit-safe-item-right">
								<!-- <div>
						<span>{{item.publishTime}}</span>
					</div> -->
<!--								优秀的创意设计师，丰厚的奖金和奖品等你来拿哦，赶快来参加吧-->
								<div style="height: 50px;"><span
										style="font-size:16px;color: #000000;">【留言】</span>{{item.content}}
									<div style="height:20px" class="ml10 mt10">
										<span>{{item.createTime}}</span>
										<!-- <span>前天</span> -->
									</div>
								</div>

                                <div>

                                    <el-button type="primary" size="small" class="mr10" @click="lookItem(item)">查看</el-button>
                                    <el-button type="success" size="small" class="mr10" @click="clickDropDown(item)">标记已读</el-button>
                                    <el-button type="danger" size="small" class="mr10" @click="deleteRow(item)">删除</el-button>
<!--                                    <el-dropdown :show-timeout="70" :hide-timeout="50" @command="(command) => {-->
<!--										clickDropDown(command, item);-->
<!--									  }-->
<!--									">-->
<!--										<span class="layout-navbars-breadcrumb-user-link" style="color: #409eff;">-->
<!--											更多-->
<!--										</span>-->
<!--                                        <template #dropdown>-->
<!--                                            <el-dropdown-menu>-->
<!--                                                <el-dropdown-item command="first">标记已读</el-dropdown-item>-->
<!--                                                <el-dropdown-item command="second">删除</el-dropdown-item>-->
<!--                                            </el-dropdown-menu>-->
<!--                                        </template>-->
<!--                                    </el-dropdown>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
                                   class="mt15"
                                   :pager-count="5" :page-sizes="[15, 35, 45]" v-model:current-page="param.current"
                                   background
                                   v-model:page-size="param.size" layout="total, sizes, prev, pager, next, jumper"
                                   :total="total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog v-model="dialogFormVisible" title="详情">
            <div class="dialogTop">
                <div class="dialogTop_title">意见建议:</div>
                <div class="dialogTop_content">{{form.content}}</div>
            </div>
            <div class="dialogBot">
                <div class="mr20">{{form.account}}</div>
                <div>{{form.createTime}}</div>
            </div>
        </el-dialog>

    </div>
</template>

<script lang="ts">
    import {toRefs, reactive, computed, onMounted} from 'vue';
    import {formatAxis} from '/@/utils/formatTime';
    import {messageList, messageEdit, allGet} from '../../api/messHint/index'
    // import { stat } from 'fs';
    import {ElMessageBox, ElMessage} from 'element-plus';

export default {
	name: 'personal',
	setup() {
		const state = reactive({
			param: {
				starttime: '',
				endtime: '',
        current:1,
        size:15,
        time: '',
			},
      total: 0,
			list: [],
			dialogFormVisible: false,
			form: {},
		});
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.param.size = val;
      initeList()
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
      state.param.current = val;
      initeList()
    };
		// 当前时间提示语
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});
		const initeList = async () => {
      const timeObj: {start: string, end: string} = checkTime(state.param?.time);
      const {start: starttime, end: endtime} = timeObj;
      const {current, size} = state.param;
      let requestData = {starttime, endtime, current, size};
      const res = await messageList(requestData);
			state.list = res.data.records
      state.total = res.data.total
			console.log(res)
		}
    const clickDropDown = async (item: any) => {
      console.log(item)
      item.status = 2
      const params = {
        status: 2,
        id: item.id
      }
      const res = await messageEdit(params)
      if (res.code === 200) {
        ElMessage.success('标记为已读');
      }
      initeList()
    }
    const deleteRow = (item:any)=>{
      ElMessageBox.confirm(
          '您确认删除该条留言信息吗?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            const params = {
              id: item.id,
              status: 0
            }
            const res = messageEdit(params)
            if (res.code === 200) {
              ElMessage.success('删除成功');
              initeList()
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })

    }
		//查看
		const lookItem = (item:any) => {
			state.form = item
      item.status = 2
      state.dialogFormVisible = true
      const params ={
        id:item.id,
        status:2
      }
      const res = messageEdit(params)
      if (res.code === 200) {
        ElMessage.success('标记为已读');
      }
    }
		//全部已读
		const allRead = async () => {
			const res = await allGet()
			if (res.code === 200) {
				ElMessage.success('留言全部已读成功');
				initeList()
			}
		}
    const checkTime = (timeArr: [string, string] | unknown): {start: string, end: string} => {
      if (Array.isArray(timeArr) && timeArr.length === 2) {
        return {
          start: timeArr[0],
          end: timeArr[1]
        }
      } else {
        return {
          start: '',
          end: ''
        }
      }
    }
		//查询
		const search =()=>{
      const timeObj: {start: string, end: string} = checkTime(state.param?.time);
      const {start: starttime, end: endtime} = timeObj;
			const params = {
        current:1,
        starttime,
        endtime
			}
			messageList(params).then((res:any)=>{
				state.list = res.data.records
			})
		}
		//重置
		const searchClear =()=>{
			state.param.starttime = ''
			state.param.endtime = ''
			initeList()
		}
		// 页面加载时
		onMounted(() => {
			initeList();
		});

            return {
                onHandleSizeChange,
                onHandleCurrentChange,
                currentTime,
                search,
                searchClear,
                clickDropDown,
              deleteRow,
                lookItem,
                allRead,
                ...toRefs(state),
            };
        },
    };
</script>

<style scoped lang="scss">
    @import '../../theme/mixins/mixins.scss';

    .personal {

        .personal-edit {
            .header_search {
                display: flex;
                justify-content: end;
                align-items: center;
            }

            .personal-edit-title {
                position: relative;
                padding-left: 10px;
                color: var(--el-text-color-regular);

                &::after {
                    content: '';
                    width: 2px;
                    height: 10px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background: var(--color-primary);
                }
            }

            .personal-edit-safe-box {
                border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
                padding: 10px 0;

                .personal-edit-safe-item {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    // justify-content: space-between;
                    // justify-content: space-around;


                    .personal-edit-safe-item-left {
                        // flex: 1;
                        width: 50px;
                        overflow: hidden;
                        position: relative;


                        .personal-edit-safe-item-left-label {
                            color: var(--el-text-color-regular);
                            margin-bottom: 5px;
                        }


                        .personal-edit-safe-item-left-value {
                            color: var(--el-text-color-secondary);
                            // @include text-ellipsis(1);
                            margin-right: 15px;

                            // width: 300px;
                            // background-color: red;
                            .imgIcon {
                                width: 50px;
                                height: 50px;
                                border: 1px solid #ebeef5;
                                // background-color: red;
                                border-radius: 50% 50%;
                                // background-image: url('../../assets/img/logo_top.png') no-repeat !important;
                                position: relative;

                                .img_img {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translateX(-50%) translateY(-50%);
                                    width: 35px;
                                    height: 35px;
                                }
                            }
                        }
                    }

                    .personal-edit-safe-item-right {
                        flex: 9;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        overflow: hidden;
                    }
                }

                &:last-of-type {
                    padding-bottom: 0;
                    border-bottom: none;
                }
            }
        }
    }

    .colorRed {
        width: 5px;
        height: 5px;
        border-radius: 50% 50%;
        background-color: red;
        position: absolute;
        top: 1px;
        // left: 70px;
    }

    ::v-deep .el-card__header {
        height: 70px !important;
        line-height: 70px;
    }

    .dialogTop {
        width: 100%;
        height: 300px;
        // background-color: red;

        .dialogTop_title {
            font-size: 20px;
        }

        .dialogTop_content {
            margin-top: 60px;
            height: 200px;
            // background-color: antiquewhite;
            word-wrap: break-word;
            word-break: normal;

            text-align: left;
            text-indent: 10em;

        }
    }

    .dialogBot {
        text-align: end;
        font-size: 16px;
    }

    .system-user-search {
        display: flex;
        flex-direction: column;

        // justify-content: end;
        .btn_bgc {
            background: #D84436;
            border: none;

        }

    }
</style>
